<!--
 * @docName: entWithdrawal.vue
 * @Author: mwl
 * @Date: 14:26
 * @LastEditors: mwl
 * @LastEditTime: 14:26
-->
<template>
  <div class='content'>
    <div class='title'>账户提现</div>
    <div class="table-page-search-wrapper" style="margin-top: 10px;">
      <a-form layout="inline">
        <a-row  type="flex" justify="space-between" align="top" style="margin-top: 10px">
          <a-col  flex="200px">
            请选择提现企业
          </a-col>
          <a-col flex="600px" >
            <a-col :md="14" :lg="14">
              <a-form-item label="企业/法人名称">
                <a-input placeholder="请输入" v-model="queryParam.keyWord"></a-input>
              </a-form-item>
            </a-col>

            <a-col :offset="1" :md="9" :lg="9">
              <a-button type="primary" @click="searchQuerys" icon="search">查询</a-button>
              <a-button @click="searchResets" icon="reload" style="margin-left: 10px">重置</a-button>
            </a-col>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <a-table
        ref="table"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="tableData"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
        :scroll="{ x: 800}">

        <!-- 字符串超长截取省略号显示-->
        <span slot="esContent" slot-scope="text">
          <j-ellipsis :value="text" :length="10" />
        </span>
        <!--渠道类型-->
        <span slot="registerType" slot-scope="text, record">
            {{{1:'个体工商户',2:'个人独资企业',3:'有限公司',4:'合伙企业'}[text]}}
        </span>
        <span slot="action" slot-scope="text, record">
          <a href="javascript:;" v-if='isSetPwd' @click="withdrawalModelFun(record)">账户提现</a>
          <a href="javascript:;" v-else @click="goToPwd()">设置支付密码</a>
        </span>
      </a-table>
    </div>
    <!--提现弹层-->
    <a-modal
      width='700px'
      title="账户提现"
      :visible="visible"
      :footer="false"
      :destroyOnClose="true"
      @cancel="handleCancel"
    >
      <div v-if='infoDetails'>
        <div class='modal-content'>
          <div class='bank-card-info'>
            <div class='left'>到账银行卡</div>
            <div class='right'>
              <div><a-icon type="credit-card" theme="filled" style='color:#4266e5;' />
                {{ infoDetails.bankName }}</div>
              <div class='text'>2小时到账</div>
            </div>
          </div>
          <div>
            <a-form-model
              ref="ruleForm"
              :model="form"
              :rules="validatorRules"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              style='padding: 30px 0;box-sizing: border-box;'
            >
              <a-form-model-item label="提现金额" prop="withdrawAmount">
                <a-input class='s' v-model="form.withdrawAmount" type="number">
                  <a-icon slot="prefix" type="property-safety" style=' color: #aaa;font-size: 24px;margin-right: 10px;margin-top: -6px' />
                </a-input>
              </a-form-model-item>
              <a-form-model-item label="支付密码" prop="password">
                <a-input-password allow-clear v-model="form.password" :autoComplete="autoCom" :type='inputType' @change="changeInputType" />
              </a-form-model-item>
              <div>当前账户余额 <span class='balance-span'>{{ Math.round(balance * 100)/10000 }}</span> 元
                <a-button type="link" class='balance-span-link' @click='withdrawalCopy()'>
                  全部提现
                </a-button></div>
            </a-form-model>
          </div>
        </div>
        <div class="main_footer">
          <a-button type="primary" @click="getQsbFundWithdrawFun()">确认提现</a-button>
        </div>
      </div>
      <div v-else>
        <a-empty>
          <span slot="description">您尚未绑定银行账户，请先绑定账户！</span>
        </a-empty>
        <div class="main_footer">
          <a-button type="primary" @click="">绑定账户</a-button>
        </div>
      </div>

    </a-modal>
  </div>
</template>

<script>
import { cloneObject, conversionBranch } from '@/utils/util'
import { getBusinessAccountEntList, getBusinessAccountInfo, getQsbFundWithdraw,getBusinessAccountIsSetPwd } from '@/api/account'
export default {
  name: 'entWithdrawal',
  data() {
    return {
      entId:'',
      loading: true,
      toggleSearchStatus: false,
      queryParam: {},
      tableData:[],
      selectedRowKeys: [],
      form:{
        withdrawAmount:null,
        password:null
      },
      value: 1,
      balance:null,
      visible:false,
      autoCom: 'off',
      inputType:'text',
      infoDetails:{},
      labelCol: { span: 3 },
      wrapperCol: { span: 15 },
      validatorRules:{
        withdrawAmount:[{ required: true, message: '请输入提现金额!' }],
        password:[{ required: true, message: '请输入支付密码!' }],
      },
      columns: [
        {
          title: '企业名称',
          align: 'center',
          width: 200,
          dataIndex: 'entName',
        },
        {
          title: '社会统一代码',
          align: 'center',
          width: 160,
          dataIndex: 'lisenceCreditCode',
        },
        {
          title: '企业负责人',
          dataIndex: 'lisenceLegal',
          align: 'center',
          width: 140
        },
        {
          title: '负责人证件号',
          dataIndex: 'cardNumber',
          align: 'center',
          width: 190
        },
        {
          title: '账户余额',
          align: 'center',
          width: 180,
          dataIndex: 'balance',
          customRender: (text,record) => {
            return Math.round(text * 100)/10000 + '元'
          },
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: {customRender: 'action'},
          align: 'center',
          width: 180,
        }
      ],
      /* 分页参数 */
      ipagination:{
        current: 1,
        pageSize: 5,
        total: 0,
        pageSizeOptions: ['5', '15', '20'],
        showTotal: (total, range) => {
          return " 共" + total + "条"
        },
        showSizeChanger: true,
      },
      isSetPwd:false
    }
  },
  created() {
    this.getTableData();
    this.getBusinessAccountIsSetPwdFun()
  },
  methods:{
    //首次获取表格数据
    getTableData(){
      this.loading = true;
      let params = {}; //查询条件
      let paramsNew = cloneObject(this.queryParam);
      params.data = paramsNew;
      params.data.balanceFlag = 1;
      params.pageNo = this.ipagination.current;
      params.pageSize = this.ipagination.pageSize;
      getBusinessAccountEntList(params).then(res => {
        if (res.success) {
          const data = res.result || {};
          // // 赋值表格数据
          this.tableData = data.records || [];
          // 赋值总条数
          this.ipagination.total = data.total || 0;
          this.loading = false;
        }else{
          this.$message.warning(res.message)
        }

      })
    },
    //查询是否设置支付密码
    getBusinessAccountIsSetPwdFun(){
      let params = {};
      getBusinessAccountIsSetPwd(params).then(res => {
        if (res.success) {
          if(res.result == 1){
            this.isSetPwd = true
          }else if(res.result == 0){
            this.isSetPwd = false
          }
        }
      })
    },
    //提现请求后台
    getQsbFundWithdrawFun(){
      let params = {};
      params = cloneObject(this.form);
      params.withdrawAmount = conversionBranch(params.withdrawAmount)
      params.entId = this.entId

      getQsbFundWithdraw(params).then(res => {
        if (res.success) {
          this.$message.success('提现成功！')
          this.visible = false;
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //密码不自动带入浏览器保存
    changeInputType(e){
      if(e.target.value !=''){
        this.inputType = 'password'
        this.autoCom = 'new-password'
      }else{
        this.inputType = 'text'
        this.autoCom = 'off'
      }
    },
    //提现拉取账户信息
    getBusinessAccountInfoFun(entId) {
      let params = {};
      //1渠道账户 2企业账户
      params.masterType = 2;
      params.masterId = entId;
      getBusinessAccountInfo(params).then(res => {
        if (res.success) {
          // // 赋值表格数据
          this.infoDetails = res.result;

          this.loading = false;
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleCancel(){
      this.visible = false;
      this.form.withdrawAmount = null;
      this.form.password = null;
    },
    //查询
    searchQuerys() {
      this.getTableData();
    },
    //重置
    searchResets() {
      this.ipagination.current=1;
      this.queryParam = {};
      this.getTableData();
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      this.ipagination = pagination;
      this.getTableData();
    },
    goToPwd(){
      this.$router.push({
        path: '/infoManagement/passwordPage'
      });
    },
    //跳转详情
    withdrawalModelFun(record ,lock){
      this.visible = true;
      this.balance = record.balance;
      this.entId = record.id;
      this.getBusinessAccountInfoFun(record.id)
    },
    //提现复制
    withdrawalCopy(){
      this.form.withdrawAmount = Math.round(this.balance * 100)/10000
    }
  }
}
</script>
<style scoped lang='less'>
.content {
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    padding: 10px 0 10px;
    border-bottom: 1px solid #ccc;
  }
  .table-page-search-wrapper{
    padding: 20px 0 0;
  }
  .container-title{
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    padding:30px 0 10px;
  }
  .container-div{
    padding-bottom: 30px;
    .text{
      display: block;
    }
    .text-div{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .card-div{
      margin: 20px 0;
      .span{
        display: inline-block;
        width: 30%;
      }
      /deep/ .ant-card-body{
        background: #fbfcff;
      }
    }
  }
}

.bank-card-info{
  display: flex;
  justify-items: self-end;
  padding: 14px;
  box-sizing: border-box;
  background: #e8e8e8;
  .left{
    width: 120px;
  }
  .right{
    font-size: 20px;
    color: #000;
    margin-top: -5px;
  }
  .text{
    font-size: 12px;
    color: #333;
  }
}
/deep/.ant-modal-title {
  text-align: left;
  font-weight: bold;
  font-size: 18px;
}
.s /deep/ .ant-input{
  border: none;
  box-shadow:none;
  font-size: 24px;
  color: #000;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 0;
  box-sizing: initial;
  margin-top: -6px;
}
/deep/.ant-input-affix-wrapper .ant-input:not(:first-child) {
  padding-left: 45px;
}
.balance-span{
  font-size: 20px;
  color: #ee9900;
}
</style>
